<template>
  <div class="info-dialog">
    <el-dialog
      :visible.sync="visible"
      :title="title"
      :modal-append-to-body="true"
      :append-to-body="true"
      :destroy-on-close="false"
      :modal="true"
      :close-on-click-modal="false"
      top="10vh"
      width="550px"
      @closed="closed"
    >
      <el-form ref="formData" :model="formData" :rules="rules">
        <el-form-item label-width="100px" label="字段名称" prop="columnName">
          <el-input v-model="formData.columnName" placeholder="请输入字段名称" autocomplete="off" />
        </el-form-item>
        <el-form-item label-width="100px" label="字段标识" prop="columnCode">
          <el-select v-model="formData.columnCode" placeholder="请选择" style="width: 100%;" :disabled="type=='1'" >
            <el-option
              v-for="item in columns"
              :key="item.value"
              :label="item.label"
              :value="item.value">
              <span style="float: left">{{ item.label }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label-width="100px" label="字段类型" prop="columnType">
          <el-select v-model="formData.columnType" placeholder="请选择" style="width: 100%;" >
            <el-option
              v-for="item in columnTypes"
              :key="item.value"
              :label="item.label"
              :value="item.value">
              <span style="float: left">{{ item.label }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label-width="100px" label="默认值" prop="defaultValue">
          <el-input v-model="formData.defaultValue" placeholder="请输入字段默认值" autocomplete="off" />
        </el-form-item>

        <el-form-item label-width="100px" label="序号" prop="sort">
          <el-input-number v-model="formData.sort" :min="2" :max="100" label="请输入序号" />
        </el-form-item>
      </el-form>
      <div style="text-align: right;">
        <el-button @click="closed" :loading="loading">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    saveFormField
  } from '@/api/template/form.js'
  export default {
    name: 'FormFiledInfoDialog',
    components: {
    },
    props: {
      properties: {
        type: Object,
        default: () => ({})
      }
    },
    computed:{

    },
    watch:{
      properties: {
        handler: function(value) {
          this.visible = value.visible
          this.usedColumns= value.usedColumns
          if (value.data) {
            this.formData.id = value.data.id || ''
            this.formData.formTemplateId = value.data.formTemplateId || ''
            this.formData.columnName = value.data.columnName || ''
            this.formData.columnCode = value.data.columnCode || ''
            this.formData.defaultValue = value.data.defaultValue || ''
            this.formData.columnType = value.data.columnType || ''
            this.formData.sort = value.data.sort || 1

          } else {
            this.formData.id = ''
            this.formData.formTemplateId = ''
            this.formData.columnName = ''
            this.formData.columnCode = ''
            this.formData.defaultValue = ''
            this.formData.columnType = ''
            this.formData.sort = 1
          }
          if (value.type) {
            this.type = value.type
            if (value.type === '0') {
              this.title = '新增'
            }
            if (value.type === '1') {
              this.title = '编辑'
            }
          }
        },
        immediate: true,
        deep: false
      }
    },
    data(){
      return {
        visible:false,
        title:'',
        loading:false,
        formData: {
          id: '',
          columnName: '',
          columnCode: '',
          defaultValue: '',
          columnType: '',
          sort:1
        },
        rules: {
          columnName: [{
            required: true,
            message: '请输入字段名称',
            trigger: 'blur'
          },
          {
            min: 1,
            max: 50,
            message: '长度在 1 到 50 个字符',
            trigger: 'blur'
          }
          ],
          columnCode: [{
            required: true,
            message: '请输入字段标识.',
            trigger: 'blur'
          },
          {
            min: 2,
            max: 50,
            message: '长度在 2 到 50 个字符',
            trigger: 'blur'
          }
          ]
        },
        columns: [],
        usedColumns:[],
        columnTypes:[{
          value: 'number',
          label: '数字'
        },{
          value: 'string',
          label: '字符串'
        }]
      }
    },
    created() {
      this.getColumns();
    },
    methods:{
      submitForm: function() {
        this.$refs.formData.validate((valid) => {
          if (valid) {
            this.loading = true
            saveFormField(this.formData).then(rsp => {
              this.$message({
                type: 'success',
                message:rsp.message
              })
              this.closed()
            }).catch(err => {
              console.log(err);
            })
            .finally(() => {
              this.loading = false
            })
          }
        })
      },
      getColumns(){
        this.columns=[];
        for(var i=1;i<=50;i++){
          if(i<=9){
            if (this.usedColumns.indexOf('filed0'+i) !== -1){
              continue
            }
            this.columns.push({
              value: 'filed0'+i,
              label: '预留字段'+i
            });
          }else{
            if (this.usedColumns.indexOf('filed'+i) !== -1){
              continue
            }
            this.columns.push({
              value: 'filed'+i,
              label: '预留字段'+i
            });
          }
        }
      },
      closed: function() {
        this.$emit('closed', false)
      },
    }
  }

</script>

<style>
</style>
